<template>
  <div class="commonTableSty">
    <a-table
      class="h100"
      ref="table"
      size="default"
      :rowKey="(record,index)=>index"
      :columns="columns"
      :components="tableComponents"
      :data-source="dataList"
      :loading="loading"
      :pagination="false"
      :scroll="{x:400,y:true}"
    >
      <template
        slot="partNumber"
        slot-scope="text"
      >
        <table-ellipsis :text="text||'_'"></table-ellipsis>
      </template>
      <template
        slot="name"
        slot-scope="text"
      >
        <table-ellipsis :text="text||'_'"></table-ellipsis>
      </template>
      <template
        slot="softwareCode"
        slot-scope="text"
      >
        <table-ellipsis :text="text||'_'"></table-ellipsis>
      </template>
      <template
        slot="configurationFile"
        slot-scope="text"
      >
        <table-ellipsis :text="text||'_'"></table-ellipsis>
      </template>
      <template
        slot="configSoftwareCode"
        slot-scope="text"
      >
        <table-ellipsis :text="text||'_'"></table-ellipsis>
      </template>
    </a-table>
  </div>
</template>
<script>
import { STable } from '@/components'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import tableDraggable from '@/utils/tableDraggable'
export default {
  name: 'PartsInforList',
  components: { STable, TableEllipsis },
  props: {
    query: {
      type: Object,
      default: () => {
        return {}
      }
    },
    refrenshTime: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      columns: [
        {
          title: this.$t('partNumber'),
          dataIndex: 'ecuModuleId',
          width: 80,
          scopedSlots: { customRender: 'partNumber' }
        },
        {
          title: this.$t('partName'),
          dataIndex: 'name',
          width: 80,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: this.$t('softwareCoding'),
          dataIndex: 'softwareCode',
          width: 80,
          scopedSlots: { customRender: 'softwareCode' }
        },
        {
          title: this.$t('configurationFile'),
          dataIndex: 'ecuConfigDid',
          width: 100,
          scopedSlots: { customRender: 'configurationFile' }
        },
        {
          title: this.$t('configurationFileCode'),
          dataIndex: 'configSoftwareCode',
          width: 100,
          scopedSlots: { customRender: 'configSoftwareCode' }
        }
      ],
      tableComponents: {},
      dataList: [],
      loading: false
    }
  },
  created () {
    this.tableComponents = tableDraggable(this.columns)
    // this.tableComponents = this.columns
  },
  watch: {
    refrenshTime: {
      handler () {
        this.dataList = [] // 初始化
        this.loadData()
      },
      immediate: true
    }
  },
  methods: {
    loadData () {
      const vm = this
      if (!Object.values(vm.query)[0]) return
      vm.loading = true
      vm.$api.getAllEcu(vm.query).then(res => {
        this.dataList = res.data.concat()
      }).finally(() => {
        vm.loading = false
      })
    }
  }
}
</script>
